<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>学生成绩查询</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    label, input, button { margin: 5px 0; display: block; }
    table { border-collapse: collapse; margin-top: 15px; }
    th, td { border: 1px solid #999; padding: 8px; }
  </style>
</head>
<body>

  <h2>学生成绩查询（前端模拟）</h2>
  <label for="studentId">学号：</label>
  <input type="text" id="studentId" placeholder="请输入学号">
  
  <label for="studentName">姓名：</label>
  <input type="text" id="studentName" placeholder="请输入姓名">
  
  <button onclick="searchScore()">查询成绩</button>

  <div id="result"></div>

  <script>
    // 模拟数据库数据
    const studentData = [
      { id: "20230001", name: "张三", course: "数学", score: 88 },
      { id: "20230002", name: "李四", course: "英语", score: 92 },
      { id: "20230003", name: "王五", course: "计算机", score: 79 }
    ];

    function searchScore() {
      const id = document.getElementById("studentId").value.trim();
      const name = document.getElementById("studentName").value.trim();
      const resultDiv = document.getElementById("result");

      const results = studentData.filter(s =>
        s.id === id && s.name === name
      );

      if (results.length > 0) {
        let html = `<table><tr><th>学号</th><th>姓名</th><th>课程</th><th>成绩</th></tr>`;
        results.forEach(s => {
          html += `<tr>
                    <td>${s.id}</td>
                    <td>${s.name}</td>
                    <td>${s.course}</td>
                    <td>${s.score}</td>
                  </tr>`;
        });
        html += `</table>`;
        resultDiv.innerHTML = html;
      } else {
        resultDiv.innerHTML = `<p style="color:red;">未找到匹配的学生信息。</p>`;
      }
    }
  </script>

</body>
</html>
